<hmtl>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>CurvedLines Plugin for flot</title>
		<script language="javascript" type="text/javascript" src="../flot/jquery.min.js"></script>
		<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../flot/excanvas.min.js"></script><![endif]-->
		<script language="javascript" type="text/javascript" src="../flot/jquery.flot.min.js"></script>
		<script language="javascript" type="text/javascript" src="../flot/jquery.flot.time.min.js"></script>
		<script language="JavaScript" type="text/javascript" src="../curvedLines.js"></script>
		<script language="JavaScript" type="text/javascript" src="_TestSetup.js"></script>
		<link rel="stylesheet" type="text/css" href="_TestSetup.css">
		</link>
	</head>
	<body>
		<div id="placeholder" style="width: 800;height: 300;"></div>
		<div id="placeholder2" style="width: 800;height: 300;"></div>
		<div id="parameters" style="width: 800"></div>

		<script id="source" language="javascript" type="text/javascript">
			//data
			var d1 = [[new Date(1358143200000), 3], [new Date(1358229600000), 4], [new Date(1358316000000), 5], [new Date(1358402400000), 11], [new Date(1358488800000), 10], [new Date(1358748000000), 12], [new Date(1358834400000), 13], [new Date(1358920800000), 5], [new Date(1359007200000), 1], [new Date(1359093600000), 2], [new Date(1359352800000), 1], [new Date(1359439200000), 3], [new Date(1359525600000), 2], [new Date(1359612000000), 1], [new Date(1359698400000), 0], [new Date(1359957600000), 0], [new Date(1360044000000), 0], [new Date(1360130400000), 5], [new Date(1360216800000), 3], [new Date(1360303200000), 3], [new Date(1360562400000), 3], [new Date(1360648800000), 21], [new Date(1360735200000), 2]];
			var d2 = [[20, new Date(2000, 1, 1, 10)], [30, new Date(2000, 1, 1, 8)], [50, new Date(2000, 1, 1, 14)], [80, new Date(2000, 1, 1, 22)]];

			//general plot options
			var options = {
				series : {
					curvedLines : {
						active : true
					}
				},
				xaxis : {
					mode : "time",
					minTickSize : [1, "hour"]
				},
				yaxis : {
					min : -10,
					max : 60
				}
			};
			var options2 = {
				series : {
					curvedLines : {
						active : true
					}
				},
				yaxis : {
					mode : "time",
					minTickSize : [1, "hour"],
					min : (new Date(2000, 1, 1)),
					max : (new Date(2000, 1, 2))
				},
				xaxis : {
					min : 10,
					max : 90
				}
			};

			//curved line paramters
			var defaultParameters = {
				apply : true,
				legacyOverride : true
			}


			//plot function
			function replot(parameters) {
				$.plot($("#placeholder"), [{
					data : d1,
					lines : {
						show : true
					},
					curvedLines : parameters
				}, {
					data : d1,
					points : {
						show : true
					}
				}], options);
			}

			function replot2(parameters) {
				$.plot($("#placeholder2"), [{
					data : d2,
					lines : {
						show : true,
						lineWidth : 3
					},
					curvedLines : parameters
				}, {
					data : d2,
					points : {
						show : true
					}
				}], options2);
			}
			
			//combine everything
			TestSetup($("#parameters"), defaultParameters, [replot, replot2])
		</script>
	</body>
</hmtl>